<template>
  <nav class="navbar">
    <div class="navbar-container">
      <a href="#home" class="logo-container">
        <img src="/src/assets/logo.png" alt="EasySound Logo" class="logo" />
        <span class="logo-text">EasySound</span>
      </a>
      <div class="nav-links">
        <a href="#home">首页</a>
        <a href="#guide">指南</a>
        <a href="#sounds">可用音效</a>
        <a href="#contact">联系</a>
        <a :href="globalData.githubUrl" target="_blank" class="flex items-center">
          <svg class="mr-1" width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M29.3444 30.4765C31.7481 29.977 33.9292 29.1108 35.6247 27.8391C38.5202 25.6676 40 22.3136 40 18.9999C40 16.6752 39.1187 14.505 37.5929 12.6668C36.7427 11.6425 39.2295 3.99989 37.02 5.02919C34.8105 6.05848 31.5708 8.33679 29.8726 7.83398C28.0545 7.29565 26.0733 6.99989 24 6.99989C22.1992 6.99989 20.4679 7.22301 18.8526 7.6344C16.5046 8.23237 14.2591 5.99989 12 5.02919C9.74086 4.05848 10.9736 11.9632 10.3026 12.7944C8.84119 14.6051 8 16.7288 8 18.9999C8 22.3136 9.79086 25.6676 12.6863 27.8391C14.6151 29.2857 17.034 30.2076 19.7401 30.6619"
              stroke="currentColor" stroke-width="4" stroke-linecap="round" />
            <path
              d="M19.7397 30.6619C18.5812 31.937 18.002 33.1478 18.002 34.2944C18.002 35.441 18.002 38.3464 18.002 43.0106"
              stroke="currentColor" stroke-width="4" stroke-linecap="round" />
            <path
              d="M29.3446 30.4766C30.4423 31.9174 30.9912 33.211 30.9912 34.3576C30.9912 35.5042 30.9912 38.3885 30.9912 43.0107"
              stroke="currentColor" stroke-width="4" stroke-linecap="round" />
            <path
              d="M6 31.2155C6.89887 31.3254 7.56554 31.7387 8 32.4554C8.65169 33.5303 11.0742 37.518 13.8251 37.518C15.6591 37.518 17.0515 37.518 18.0024 37.518"
              stroke="currentColor" stroke-width="4" stroke-linecap="round" />
          </svg>
          GitHub</a>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { globalData } from '@/assets/data/global.js'
</script>

<style scoped>
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  animation: fadeInDown 0.5s ease-out;
}

.navbar-container {
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.logo {
  height: 2rem;
  width: auto;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4f46e5;
}

/* 默认隐藏菜单（小屏） */
.nav-links {
  display: none;
}

/* 768px 以上显示菜单（md 及更大） */
@media (min-width: 768px) {
  .nav-links {
    display: flex;
    gap: 2rem;
  }
}

.nav-links a {
  color: #374151;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #4f46e5;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
